<template>
  <div>
    <el-card>
      <lw-form
        :searchFormConfig="config"
        v-model="modelValue"
        :rules="rules"
        ref="formTestRef"
      >
        <template #header>
          <div class="header">
            <h1>高级检索</h1>
          </div>
        </template>
        <template #footer>
          <div class="footer">
            <el-button type="primary" :icon="Refresh" @click="resetBtnClick"
              >重置</el-button
            >
            <el-button type="primary" :icon="Search" @click="searchBtnClick"
              >搜索</el-button
            >
          </div>
        </template>
      </lw-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
const config = {
  itemStyle: {
    padding: "10px 20px",
  },
  itemColLayout: {
    span: 6,
  },
  formItems: [
    {
      field: "account",
      type: "input",
      types: "text",
      label: "账号",
      hidden: false,
      placeholder: "请输入账号",
    },
    {
      field: "password",
      type: "input",
      types: "password",
      label: "密码",
      hidden: false,
      placeholder: "请输入密码",
    },
    {
      field: "select",
      type: "select",
      label: "选项",
      hidden: false,
      placeholder: "请选择",
      options: [
        {
          label: "启用",
          value: 1,
        },
        {
          label: "禁用",
          value: 0,
        },
      ],
    },
    {
      field: "date",
      type: "datepicker",
      label: "创建时间",
      hidden: false,
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
    },
  ],
};
const rules = reactive({
  account: [
    { required: true, message: "必填项", trigger: "blur" },
    { min: 3, max: 5, message: "最多个3-5字", trigger: "change" },
  ],
});

// form值
const modelValue = reactive({});
const formTestRef = ref();
// 重置
const resetBtnClick = () => {
  formTestRef.value.reset();
  emits("resetBtnClick", {});
};
// 确定
const searchBtnClick = () => {
  let queryInfo = { ...modelValue };
  // 清空queryInfo中没有值的属性
  for (const i in queryInfo) {
    if (queryInfo[i] === "" || queryInfo[i] === "undefined") {
      delete queryInfo[i];
    }
  }
  emits("searchBtnClick", queryInfo);
};
const emits = defineEmits(["searchBtnClick", "resetBtnClick"]);
</script>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer {
  display: flex;
  justify-content: flex-end;
}
</style>
